<template>
  <div>
    <nav-bar>
      <div slot="center">异常</div>
    </nav-bar>
    <van-nav-bar class="app-nav-bar" left-arrow @click-left="onClickLeft">
      <template #title>{{ title }}</template>
    </van-nav-bar>
    <div class="unusualList">
      <div style="width: 100%">
        <div id="unChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require("echarts");
import NavBar from "../../components/NavBar.vue";

import { getMouthUnusualInfo } from "../../api/unusual";
export default {
  name: "unlist",
  components: {
    NavBar,
  },
  data() {
    return {
      title: "",
      unusualInfo: [],
      newArr: [],
    };
  },
  methods: {
    getUnInfo() {
      let params = {};
      if (this.$route.params.timeId === "0") {
        params = {
          category: "mouth",
        };
      } else if (this.$route.params.timeId === "1") {
        params = {
          category: "day",
        };
      }
      getMouthUnusualInfo(params)
        .then((res) => {
          this.unusualInfo = res.data[this.$route.params.categoryId].list;
          var newList = [];
          for (var i = 0; i < this.unusualInfo.length; i++) {
            let obj = {
              name: this.unusualInfo[i].MTNAME,
              time: this.unusualInfo[i].totleTime,
              code: this.unusualInfo[i].MTCODE,
            };
            newList.push(obj);
          }
          newList.forEach((el) => {
            const result = this.newArr.findIndex((ol) => {
              return el.name === ol.name;
            });
            if (result !== -1) {
              this.newArr[result].time = this.newArr[result].time + el.time;
            } else {
              this.newArr.push(el);
            }
          });

          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickLeft() {
      this.$router.push("/unusual");
    },
    drawChart() {
      var myChart = echarts.init(document.getElementById("unChart"));
      var option = {
        dataset: [
          {
            dimensions: ["code", "time", "name"],
            source: this.newArr,
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "time", order: "asc" },
            },
          },
        ],
        xAxis: {},
        grid: {
          left: "15%",
        },
        yAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 },
        },
        series: {
          type: "bar",
          avoidLabelOverlap: true,
          encode: { x: "time", y: "name" },
          datasetIndex: 1,
          label: {
            show: true,
            position: "right",
          },
        },
      };
      var _this = this;
      myChart.on("click", function (params) {
        _this.$router.push({
          name: "unInfolist",
          params: {
            name: params.data.name,
            code: params.data.code,
            routeID: _this.$route.params.categoryId,
            timeId: _this.$route.params.timeId,
            category: _this.title,
          },
        });
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    switch (this.$route.params.categoryId) {
      case "0":
        this.title = "设备故障";
        break;
      case "1":
        this.title = "计划停机";
        break;
      case "2":
        this.title = "更换工装";
        break;
      case "3":
        this.title = "质量调整";
        break;
      case "4":
        this.title = "更换刀具";
        break;
      case "5":
        this.title = "物料等待";
        break;
      default:
        this.title = "没有匹配";
    }
  },
  created() {
    this.getUnInfo();
  },
};
</script>

<style scoped lang="less">
#unChart {
  width: 100%;
  height: 650px;
}
.unusualList {
  margin-top: 80px;
  font-size: 0.4rem;
  height: 1.22rem;
  line-height: 1.22rem;
  text-align: center;
  color: #fff;
}
</style>
